<!--
 * @Author: 曹捷
 * @Date: 2020-06-19 09:56:22
 * @LastEditors: 曹捷
 * @LastEditTime: 2020-06-19 15:24:39
 * @Description: 修改手机号码
--> 
<template>
  <div class="app-main back-while">
    <div class="main-box m-t-30">
      <obitInput class="bottom-info m-t-20" placeholder="新手机号码" v-model="params.phone"></obitInput>
      <obitInput class="bottom-info m-t-20" placeholder="验证码" v-model="params.code">
        <span @click="sendCode" class="color-bkg">{{timeText}}</span>
      </obitInput>
    </div>
    <view class="p-l-20 p-r-20 m-t-50">
      <button :class="{'btn-disable':!validateStatus}" @click="submit" class="zaiui-btn">确认变更</button>
    </view>
  </div>
</template>

<script>
import validate from '@/app-modules/mixin/validate.js'
import { loginOut } from '@/app-modules/utils/user.js'
export default {
  mixins: [validate],
  data() {
    return {
      params: {
        code: '',
        phone: ''
      },
      timeSecond: 60,
      timeText: '获取验证码',
      rules: {
        phone: [
          { required: true, message: '请输入手机号码' },
          { type: 'phone', message: '请输入正确的手机号码' }
        ],
        code: [
          { required: true, message: '请输入验证码' },
          { type: 'number', message: '请输入正确的数值' },
          { min: 6, max: 6, message: '请输入6位验证码' }
        ]
      },
      time: ''
    }
  },
  computed: {
    validateStatus() {
      return this.validate(this.params, this.rules, false)
    }
  },
  methods: {
    sendCode() {
      let res = this.validateItem(this.params.phone, this.rules.phone)
      if (!res) {
        return
      }
      if (this.timeSecond === 60) {
        this.time = setInterval(() => {
          this.timeText = `请${this.timeSecond}秒后重试`
          this.timeSecond--
          if (this.timeSecond === 0) {
            this.removeTime()
          }
        }, 1000)
      }
    },
    removeTime() {
      this.timeSecond = 60
      this.timeText = '获取验证码'
      clearInterval(this.time)
    },
    submit() {
      let valide = this.validate(this.params, this.rules)
      if (valide) {
        this.showToast('修改成功')
        loginOut()
      }
    }
  },
  destroyed() {
    this.removeTime()
  }
}
</script>

<style>
</style>
